import {Component, OnInit} from "@angular/core";
import {ProductService} from "../../service/product/product.service";
import {ActivatedRoute} from "@angular/router";
import {Product} from "../../service/entity/product";
import {FormControl} from "@angular/forms";
import {debounce, debounceTime} from "rxjs/operators";
import {Observable} from "rxjs";

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  products: Observable<Product[]>;

  productId: number;

  productTitle: string;

  keyWord: string;

  /*与input绑定属性*/
  titleFilter: FormControl = new FormControl();

  /*用于接收路由传递过来的参数*/
  constructor(private routeInfo: ActivatedRoute, private productService: ProductService) {
    /* this.titleFilter.valueChanges
       .pipe(debounceTime(500))
       /!*value表示改变的数值*!/
       .subscribe(value => this.keyWord = value);*/

  }

  /*声明周期钩子 初始化一次*/
  ngOnInit() {
    /*参数快照 因为ngOnInit执行一次 参数快照无法再相同组件切换时动态变换属性值*/
    /*this.productId = this.routeInfo.snapshot.queryParams['ids'] || this.routeInfo.snapshot.params['id'];*/
    /*参数订阅 id再路由中订阅*/
    /*this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);
    /!*订阅传递过来的数据*!/
    this.routeInfo.data.subscribe((data: { product: Product }) => {
      this.productId = data.product.id;
      this.productTitle = data.product.title;
    });*/
    this.products = this.productService.getProducts();
    this.productService.searchEvent.subscribe(
      params => {
        this.products = this.productService.getSearchProducts(params);
        console.log("wolaile");
      }
    )
  }

}
